<template>
  <view class="container">
    <view class="content">
      <view class="title">
        <view class="_date">
          <text class="-k">日期</text>
          <text class="-text">{{ item.createTime }}</text>
        </view>
        <view class="_name">{{ item.memberName }}</view>
      </view>
      <view class="info">
        <!-- <view class="_item _left">
          <view class="-k">缴费方式</view>
          <view>人工缴费</view>
        </view> -->
        <view class="_item">
          <view class="-k">审核人员</view>
          <view>{{ item.sysUserName }}</view>
        </view>
        <view class="_item">
          <view class="-k">金额</view>
          <view>{{ item.nowMoney }}</view>
        </view>
        <view class="_item _right">
          <view class="-k">缴费凭证</view>
          <view
            class="_detail"
            @click="navigateTo({ name: 'payDetail', options: { id: item.id, isEdit: false } })"
          >
            <text class="-text">详情</text>
            <img class="-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-6.png" alt="" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import TImage from '@/components/TImage/index.vue';
  import type { IPaymentRecordListResData } from '@/api/admin/types';
  import { type PropType, computed } from 'vue';
  import { navigateTo } from '@/router';

  const props = defineProps({
    item: {
      type: Object as PropType<IPaymentRecordListResData>,
      required: true,
    },
  });
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    background-color: #fff;
    margin-top: 4rpx;
    margin-bottom: 30rpx;

    .content {
      font-size: 24rpx;
      color: #333333;

      .-k {
        color: #808080;
      }

      .title {
        display: flex;
        justify-content: space-between;
        height: 72rpx;
        line-height: 72rpx;
        padding: 0 30rpx;
        border-bottom: 1rpx #dddddd solid;

        ._date {
          .-text {
            margin-left: 20rpx;
          }
        }

        ._name {
          max-width: 300rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .info {
        display: flex;
        text-align: center;
        padding: 28rpx 30rpx;

        ._item {
          flex: 1;

          .-k {
            margin-bottom: 14rpx;
          }

          ._detail {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .-text {
              color: #2878ff;
            }

            .-icon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 6rpx;
            }
          }
        }

        ._left {
          text-align: left;
        }

        ._right {
          text-align: right;
        }
      }
    }
  }
</style>
